<template>
  <div class="menu-content-attribute-version">
    <a-button @click="layoutGraph" class="button-layout-graph">
      重置视角
    </a-button>
    <div class="select-zoom">
      <select-zoom v-model:zoom="zoom" :graph="graph" />
    </div>
    <div class="icon-zoom-in">
      <icon-zoom-in v-model:zoom="zoom" :graph="graph" />
    </div>
    <div class="icon-zoom-out">
      <icon-zoom-out v-model:zoom="zoom" :graph="graph" />
    </div>
    <a-spin :spinning="loading" v-if="loading" />
    <div class="container" id="container" v-else @contextmenu.prevent>
      <context-menu-edge :graph="graph" />
    </div>
  </div>
</template>
<script setup>
import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue'
import { useRoute } from 'vue-router'
import { Graph, EdgeEvent } from '@antv/g6'
import SelectZoom from './menu-content-attribute-relation-zoom-select.vue'
import IconZoomIn from './menu-content-attribute-relation-zoom-in.vue'
import IconZoomOut from './menu-content-attribute-relation-zoom-out.vue'
import ContextMenuEdge from './menu-content-attribute-relation-edge-context-menu.vue'
import { listRelations } from '@/api/db.js'
import { useDbType } from '@/views/db-management/provide-context.js'

import mockAPI from '@/api/simple-mock.js'
import { initialEdges, initialNodes } from './mock-data.js'

/**
 * 全局
 */
let route = useRoute()
/**
 * 加载数据
 */
let loading = ref(false)
let dbType = useDbType()
onMounted(async () => {
  loading.value = true
  try {
    let result = await listRelations(
      {
        id: route?.params?.id,
      },
      dbType,
    )
    nextTick(() => {
      render(standardisation(result?.data))
    })
  } catch (e) {}
  loading.value = false
})

function standardisation(data = {}) {
  let { nodes = [], edges = [] } = data
  nodes = nodes.map(({ id, fileName, fileCode, fileVersion, effectFlag }) => {
    return {
      id,
      data: {
        effectFlag,
        dataName: fileName,
        dataId: fileCode,
        version: fileVersion,
      },
    }
  })
  edges = edges.map(({ source, target, relationId, relationship }) => {
    return {
      id: relationId,
      source,
      target,
      style: {
        labelText: relationship,
      },
    }
  })
  return { nodes, edges }
}
/**
 * 图
 */
let zoom = ref(1)
/**
 * 创建图
 */
let graph = shallowRef()
function render(data) {
  graph.value = new Graph({
    container: 'container',
    autoFit: 'view',
    data,
    node: {
      // type: 'rect',
      style: {
        size: 320,
        badge: true,
        badges: params => {
          return [
            {
              text: `文件名:  ${params.data.dataName}`,
              offsetY: 120,
              fill: '#262626',
              background: false,
            },
            {
              text: `文件编号:  ${params.data.dataId}`,
              offsetY: 150,
              fill: '#262626',
              background: false,
            },
            {
              text: `版本号:  ${params.data.version}`,
              offsetY: 180,
              fill: '#262626',
              background: false,
            },
          ]
        },
        fill: params => {
          let id = params.id
          if (route.params.id === id) {
            return '#42a5ff'
          }
          return params.data.effectFlag ? '#eff4ff' : '#fcfcfc'
        },
        stroke: '#ececec',
        lineWidth: 2,
        badgeFontSize: 14,
      },
    },
    edge: {
      style: {
        router: {
          type: 'orth',
        },
        endArrow: true,
        startArrowSize: 20,
        stroke: '#c2c8d5',
        // labelText: params => params.data.text,
        labelFill: '#0086ff',
        labelAutoRotate: false,
        // lineWidth: 2,
      },
    },
    layout: {
      type: 'd3-force',
      collide: {
        strength: 0.5,
      },
      nodeSize: 220,
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  })
  graph.value.render()
  setTimeout(() => {
    graph.value.stopLayout()
    layoutGraph()
  }, 3000)
}

/**
 *重置
 */
function layoutGraph() {
  graph?.value?.focusElement?.(route.params.id)
  zoom.value = graph?.value?.getZoom?.()
}
/**
 * 监听鼠标滚轮
 */
</script>
<style lang="less" scoped>
.menu-content-attribute-version {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .button-layout-graph {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .select-zoom {
    position: absolute;
    top: 5px;
    right: 70px;
    z-index: 1;
  }
  .icon-zoom-in {
    position: absolute;
    top: 12px;
    right: 0;
    z-index: 1;
  }
  .icon-zoom-out {
    position: absolute;
    top: 12px;
    right: 36px;
    z-index: 1;
  }
  .container {
    width: 100%;
    height: 100%;
  }
}
</style>
